<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面设计 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span>异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="qd-display.html" class="nav-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item">
                    <i class="fas fa-project-diagram"></i>
                    <span>系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item">
                    <i class="fas fa-database"></i>
                    <span>数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item">
                    <i class="fas fa-cogs"></i>
                    <span>模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item active">
                    <i class="fas fa-desktop"></i>
                    <span>用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item">
                    <i class="fas fa-flask"></i>
                    <span>收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item">
                    <i class="fas fa-eye"></i>
                    <span>关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item">
                    <i class="fas fa-info-circle"></i>
                    <span>模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item">
                    <i class="fas fa-book"></i>
                    <span>技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span>管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>用户界面设计</h1>
                    <p>异烟酸生产收率预测系统的界面设计方案与交互原则</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 顶部导航链接 -->
                <div class="navigation-links">
                    <a href="model-value.html" class="nav-link">1. 模型应用价值与落地路径</a>
                    <a href="system-architecture.html" class="nav-link">2. 系统架构设计</a>
                    <a href="data-flow.html" class="nav-link">3. 数据流设计</a>
                    <a href="model-deployment.html" class="nav-link">4. 模型部署与应用</a>
                    <a href="ui-design.html" class="nav-link active">5. 用户界面设计</a>
                    <a href="yield-prediction.html" class="nav-link">收率预测</a>
                    <a href="parameter-monitoring.html" class="nav-link">关键参数监控</a>
                </div>

                <!-- 页面内容 -->
                <div class="page-content">
                    <!-- 设计原则 -->
                    <div class="section-title">设计原则</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-compass"></i>
                            用户界面设计原则
                        </div>
                        <p>异烟酸生产收率预测系统的界面设计遵循以下核心原则，确保系统易用性和用户体验：</p>
                        
                        <div class="info-grid">
                            <div class="info-card">
                                <div class="info-card-icon">
                                    <i class="fas fa-user-friends"></i>
                                </div>
                                <div class="info-card-title">以用户为中心</div>
                                <div class="info-card-text">
                                    根据不同角色（操作员、工程师、管理者）的需求和工作流程，定制界面布局和功能展示，提供角色化的使用体验。
                                </div>
                            </div>
                            
                            <div class="info-card">
                                <div class="info-card-icon">
                                    <i class="fas fa-layer-group"></i>
                                </div>
                                <div class="info-card-title">信息层次清晰</div>
                                <div class="info-card-text">
                                    采用视觉层次结构，突出关键信息，次要信息弱化处理，确保用户能快速获取最重要的数据和洞察。
                                </div>
                            </div>
                            
                            <div class="info-card">
                                <div class="info-card-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="info-card-title">数据可视化优先</div>
                                <div class="info-card-text">
                                    使用图表、仪表盘等可视化方式直观展示复杂数据，帮助用户快速理解生产状态和趋势变化。
                                </div>
                            </div>
                            
                            <div class="info-card">
                                <div class="info-card-icon">
                                    <i class="fas fa-hand-pointer"></i>
                                </div>
                                <div class="info-card-title">交互简洁高效</div>
                                <div class="info-card-text">
                                    减少操作步骤，提供快捷方式和上下文操作，确保用户能以最少的点击完成任务。
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 界面布局 -->
                    <div class="section-title">界面布局</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-columns"></i>
                            整体布局设计
                        </div>
                        
                        <div class="architecture-diagram">
                            <img src="https://via.placeholder.com/800x450?text=异烟酸生产收率预测系统界面布局" alt="界面布局示意图" style="width: 100%; max-width: 800px; margin: 20px auto; display: block;">
                        </div>
                        
                        <div class="value-cards">
                            <div class="value-card">
                                <div class="value-icon">
                                    <i class="fas fa-th-large"></i>
                                </div>
                                <div class="value-content">
                                    <div class="value-title">左侧导航区</div>
                                    <div class="value-desc">提供系统主要功能模块的快速导航，采用垂直菜单结构，支持折叠展开，节省屏幕空间。</div>
                                </div>
                            </div>
                            
                            <div class="value-card">
                                <div class="value-icon">
                                    <i class="fas fa-heading"></i>
                                </div>
                                <div class="value-content">
                                    <div class="value-title">顶部状态区</div>
                                    <div class="value-desc">显示当前页面标题、系统状态、通知提醒和用户信息，提供全局搜索和快捷操作入口。</div>
                                </div>
                            </div>
                            
                            <div class="value-card">
                                <div class="value-icon">
                                    <i class="fas fa-table"></i>
                                </div>
                                <div class="value-content">
                                    <div class="value-title">主内容区</div>
                                    <div class="value-desc">展示当前功能模块的详细内容，采用卡片式布局，支持拖拽调整和个性化配置。</div>
                                </div>
                            </div>
                            
                            <div class="value-card">
                                <div class="value-icon">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <div class="value-content">
                                    <div class="value-title">数据展示区</div>
                                    <div class="value-desc">使用多种图表和可视化组件，展示关键指标、趋势和预测结果，支持交互式探索。</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 关键页面设计 -->
                    <div class="section-title">关键页面设计</div>
                    
                    <div class="scene-grid">
                        <div class="scene-item">
                            <div class="scene-icon">
                                <i class="fas fa-tachometer-alt"></i>
                            </div>
                            <div class="scene-content">
                                <div class="scene-title">主控面板</div>
                                <div class="scene-desc">
                                    采用仪表盘式设计，展示生产关键指标、设备状态、预警信息和收率预测结果。支持自定义布局和关注指标，提供全局视图。
                                </div>
                            </div>
                        </div>
                        
                        <div class="scene-item">
                            <div class="scene-icon">
                                <i class="fas fa-flask"></i>
                            </div>
                            <div class="scene-content">
                                <div class="scene-title">收率预测页面</div>
                                <div class="scene-desc">
                                    集中展示当前生产批次的收率预测结果、影响因素分析和参数优化建议。提供历史对比和多场景模拟功能。
                                </div>
                            </div>
                        </div>
                        
                        <div class="scene-item">
                            <div class="scene-icon">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="scene-content">
                                <div class="scene-title">参数监控页面</div>
                                <div class="scene-desc">
                                    实时监控关键工艺参数，提供趋势图、异常检测和参数相关性分析。支持设置预警规则和自动通知。
                                </div>
                            </div>
                        </div>
                        
                        <div class="scene-item">
                            <div class="scene-icon">
                                <i class="fas fa-chart-bar"></i>
                            </div>
                            <div class="scene-content">
                                <div class="scene-title">在线分析页面</div>
                                <div class="scene-desc">
                                    提供交互式数据分析工具，支持多维度数据筛选、自定义图表和报表导出，满足深度分析需求。
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 交互设计 -->
                    <div class="section-title">交互设计</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-mouse-pointer"></i>
                            交互设计要点
                        </div>
                        
                        <table class="performance-table">
                            <thead>
                                <tr>
                                    <th>交互场景</th>
                                    <th>设计方案</th>
                                    <th>用户体验提升</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>数据过滤与筛选</td>
                                    <td>提供直观的筛选控件和快速过滤器，支持拖拽操作和条件组合</td>
                                    <td>减少50%的筛选操作时间，提高数据分析效率</td>
                                </tr>
                                <tr>
                                    <td>参数调整与优化</td>
                                    <td>使用滑块、旋钮等直观控件，提供实时反馈和参数影响预览</td>
                                    <td>降低操作复杂度，提高参数调整的准确性</td>
                                </tr>
                                <tr>
                                    <td>异常预警与处理</td>
                                    <td>采用颜色编码和动态提醒，提供一键处理和处理流程引导</td>
                                    <td>减少异常响应时间，提高处理效率</td>
                                </tr>
                                <tr>
                                    <td>数据钻取与探索</td>
                                    <td>支持点击下钻、多维度切换和上下文关联分析</td>
                                    <td>增强数据洞察能力，发现隐藏关联</td>
                                </tr>
                                <tr>
                                    <td>报表生成与分享</td>
                                    <td>提供模板选择、自定义配置和多格式导出</td>
                                    <td>简化报告生成流程，提高协作效率</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 响应式设计 -->
                    <div class="section-title">响应式设计</div>
                    
                    <div class="value-cards">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-desktop"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">大屏控制室显示</div>
                                <div class="value-desc">针对控制室大屏幕优化，提供全局视图和关键指标实时监控，支持远距离查看。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-laptop"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">工程师工作站</div>
                                <div class="value-desc">提供完整功能和详细数据分析工具，支持多屏操作和高级配置。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-tablet-alt"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">平板移动巡检</div>
                                <div class="value-desc">针对现场巡检场景优化，提供简化视图和触控友好界面，支持离线数据同步。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-mobile-alt"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">手机紧急通知</div>
                                <div class="value-desc">提供关键预警推送和简要状态查看，支持远程快速响应和处理。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/common.js"></script>
    <script src="scripts/main-nav.js"></script>
</body>
</html> 